<!-- userList -->
<template>
  <div class='userList'>
    <div
      class="listItem"
      v-for="(item,i) in list"
      :key="i"
    >
      <a-avatar
        class="avatar"
        icon="user"
        :size="56"
        :src="item.url"
      />
      <div class="userInfo">
        <div class="userName">
          <div class="name">{{item.name}}</div>
          <div class="time"><span v-if="clientW>=1300">2020-8-24</span> 14:54</div>
        </div>
        <div class="userMsg">
          <div class="msg">{{item.msg}}</div>
          <div class="count">{{item.count}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  components: {},
  props: {

  },
  data() {
    return {
      clientW: '',
      list: [
        {
          url: 'http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png',
          name: 'xiaozhan的放松放松g',
          msg: '鸭瑟类啦雷，梁非凡！快去操场跑步！paopoa',
          count: '3'
        },
        {
          url: 'http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png',
          name: 'xiaozhang',
          msg: '鸭瑟类啦雷，梁非凡！',
          count: '3'
        },
        {
          url: 'http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png',
          name: 'xiaozhang',
          msg: '鸭瑟类啦雷，梁非凡！',
          count: '3'
        }, {
          url: 'http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png',
          name: 'xiaozhan的放松放松g',
          msg: '鸭瑟类啦雷，梁非凡！快去操场跑步！paopoa',
          count: '3'
        },
        {
          url: 'http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png',
          name: 'xiaozhang',
          msg: '鸭瑟类啦雷，梁非凡！',
          count: '3'
        },
        {
          url: 'http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png',
          name: 'xiaozhang',
          msg: '鸭瑟类啦雷，梁非凡！',
          count: '3'
        }, {
          url: 'http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png',
          name: 'xiaozhan的放松放松g',
          msg: '鸭瑟类啦雷，梁非凡！快去操场跑步！paopoa',
          count: '3'
        },
        {
          url: 'http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png',
          name: 'xiaozhang',
          msg: '鸭瑟类啦雷，梁非凡！',
          count: '3'
        },
        {
          url: 'http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png',
          name: 'xiaozhang',
          msg: '鸭瑟类啦雷，梁非凡！',
          count: '3'
        }, {
          url: 'http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png',
          name: 'xiaozhan的放松放松g',
          msg: '鸭瑟类啦雷，梁非凡！快去操场跑步！paopoa',
          count: '3'
        },
        {
          url: 'http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png',
          name: 'xiaozhang',
          msg: '鸭瑟类啦雷，梁非凡！',
          count: '3'
        },
        {
          url: 'http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png',
          name: 'xiaozhang',
          msg: '鸭瑟类啦雷，梁非凡！',
          count: '3'
        },
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    resizeClient() {
      this.clientW = document.body.clientWidth
      console.log(this.clientW)
    }
  },
  created() {

  },
  mounted() {
    // 监听窗口发生变化，resize组件
    window.addEventListener('resize', _.throttle(this.resizeClient, 3000))
    // 通过hook监听组件销毁钩子函数，并取消监听事件
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.resizeClient)
    })
  },
}
</script>
<style lang="less" scoped>
.userList {
  color: #fff;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
  &::-webkit-scrollbar {
    display: none;
  }
  .listItem {
    width: 100%;
    height: 8vh;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    &:hover {
      cursor: pointer;
      box-shadow: 0 6px 11px -5px #fff;
    }
    .avatar {
      min-width: 56px;
      min-height: 56px;
    }
    .userInfo {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 1vw;
      overflow: hidden;
      .userName {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        .name {
          font-size: 1.3rem;
          line-height: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          flex: 1;
        }
        .time {
          width: 35%;
          font-size: 0.8rem;
          text-align: right;
        }
      }
      .userMsg {
        .userName;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        .msg {
          overflow: hidden;
          font-size: 0.8rem;
          flex: 1;
        }
        .count {
          font-size: 0.8rem;
          width: 1rem;
          height: 1rem;
          line-height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          border-radius: 1rem;
          background-color: #1890ff;
          box-shadow: -6px 0 33px 35px #000;
        }
      }
    }
  }
}
</style>